<?php use app\commands\front\MockWidget; ?>
<?php MockWidget::begin(); ?>
<?php MockWidget::end();
$type = Yii::$app->request->get('type', 1);//阅读2 全部 5
$continue = Yii::$app->request->get('continue', 0);//0开始 1继续
$cate_id = Yii::$app->request->get('cate', 1);
?>
<link rel="stylesheet" href="/cn/css/mock/read.css?v=1.1">

<section class="exerciseBox" id="readBox">
    <div class="exerciseHead">
        <div class="headCenter">
            <div class="headCenterLeft">
                <img :src="userImage?userImage:'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/20@2x.png'"
                     alt="">
                {{userName}}
            </div>
            <div class="headCenterRight">
                <div class="headTime">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/22@2x.png" alt="">
                    <p class="not-precise" v-show="timeLayout" v-cloak @mouseover="timeLayout = false">
                        <span class="time">{{minutes == 60?'60':minutes!='0'?Number(minutes)+1:'0'}}</span>
                        <span class="minutes">minutes</span>
                        left
                    </p>
                    <p class="precise" v-show="!timeLayout" v-cloak @mouseleave="timeLayout = true">
                        <span class="minute">{{minutes<10?'0'+minutes:minutes}}</span>
                        : <span class="second">{{seconds<10?'0'+seconds:seconds}}</span>
                        left
                    </p>
                </div>
                <div class="buttonBox">
                    <a href="javascript:;" class="FinishBtn" v-if="type == 5" @click="finishSec">Finish Section</a>
                    <a href="javascript:;" class="FinishBtn" v-if="type != 5" @click="finishSec">Finish Test</a>
                    <a href="javascript:;" class="PauseBtn" @click="pause">Pause</a>
                    <a href="javascript:;" class="HelpBtn" @click="help">Help</a>
                    <a href="javascript:;" class="HideBtn" @click="hide">Hide</a>
                </div>
            </div>
        </div>
    </div>
    <div class="exerciseCenter" id="exerciseCenter">
        <!--第一步-->
        <div class="steps step1" v-show="steps == 1">
            <p class="stepTitle">
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/24@2x.png" alt="">
                Confirm your details
            </p>
            <div class="stepContent">
                <p class="bc-title">EXAMPLE</p>
                <div class="bc-intro">
                    <p>・ Name:</p>
                    <p>・ Date of birth: XX-Xx-XXXX</p>
                    <p>・ Candidate number:XXXX-xxxxx</p>
                </div>
                <p class="stepTitle" style="width: 93%">
                    <img style="width: 15px;" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/25@2x.png" alt="">
                    If your details aren′t correct, please inform the invigilator.
                </p>
                <a href="javascript:;" class="confirmMessage" @click="steps = 3">My details are correct</a>
            </div>
            <div class="stepTip" v-if="showTip">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png" alt="">
                <p>Please click the "my details are correct" button to progress intothe listening familiarisation test,
                    inyour real IELTS testthere will be an invigilator in the roomto advise when to dothis.</p>
            </div>
        </div>
        <!--第三步-->
        <div class="steps step3" v-show="steps == 3">
            <div class="row">
                <div class="col">
                    <h5>IELTS Listening</h5>
                    <p>Time: 1 hour</p>
                    <h5>INSTRUCTIONS TO CANDIDATES</h5>
                    <ul>
                        <li>· Answer <strong>all</strong> the questions.</li>
                        <li>· You can change your answers at any time during the test.</li>
                    </ul>
                    <h5>INFORMATION FOR CANDIDATES</h5>
                    <ul>
                        <li>· There are 40 questions in this test.</li>
                        <li>· Each question carries one mark.</li>
                        <li>· There are four parts to the test</li>
                        <li>· You will hear each part once.</li>
                        <li>· For each part of the test there will be time for you to look through the questions and
                            time for
                            you
                            to check your answers.
                        </li>
                    </ul>
                </div>
            </div>
            <p class="warnTips">Do not click 'Start test' until you are told to do so</p>
            <a href="javascript:;" class="StartTest" @click="startTest">Start test</a>
            <div class="stepTip" v-if="showTip" style="bottom: -100px">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png" alt="">
                <p>Please click the “Start test” button to start the familiarisation test, in your real IELTS test there
                    will be an invigilator in the room to advise when to do this.</p>
            </div>
        </div>
        <!--第四步 做题-->
        <div class="steps step4" id="stepExercise" style="margin: 0 auto" v-show="steps == 4">
            <div class="quesBox" v-for="(itemBox,indexBox) in dataQuestion.data">
                <div class="partTitle" v-show="currentPart == indexBox ">
                    <p>Part {{indexBox + 1}} </p>
                    <span>Read the text below and answer questions {{dataQuestion.question_list[indexBox][0].th}} - {{dataQuestion.question_list[indexBox][dataQuestion.question_list[indexBox].length-1].th}}.</span>
                </div>
                <div class="quesContent" v-show="currentPart == indexBox ">
                    <div class="fullText" v-html="itemBox.article.description"></div>
                    <div class="articleText">
                        <div class="outDiv" v-for="(item,index) in itemBox.topic" :id="item.parent.type">
                            <!--单选题  numbering 7  是非判断题 numbering 3  都是单项选择题且表现形式一样-->
                            <div class="" v-if="item.parent.numbering == 7 || item.parent.numbering == 3">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="containerBox">
                                    <div class="singleBox ItemIn" v-for="(itemSon,indexSon) in item.son" :id="'read_'+ itemSon.content_id">
                                        <div class="singleTitle">
                                            <div v-html="itemSon.article"></div>
                                            <img class="spin" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/28@2x.png" alt="" @click="toggle($event)">
                                        </div>
                                        <div class="singleZt">
                                            <div class="singleCover" v-for="(itemSonDes,indexSonDes) in itemSon.description">
                                                <input :id="itemSon.id+'_'+indexSonDes" type="radio" class="radioBox" @change="getAnswer(index,itemSon.id,indexSon)"
                                                       v-model="AnswerArry[indexBox][index][indexSon].answer" :value="letterArry[indexSonDes]" @click="getDoNow(itemSon.content_id)">
                                                <label :for="itemSon.id+'_'+indexSonDes"><b style="margin-right: 5px;"></b>{{item.parent.numbering == 7?letterArry[indexSonDes]:''}}
                                                    {{itemSonDes}}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--多选题  1-->
                            <div class="" v-if="item.parent.numbering == 1">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="singleBox1 ItemIn" :id="'read_'+ item.son[0].content_id">
                                    <div class="singleTitle">
                                        <div v-html="item.son[0].article"></div>
                                        <img class="spin" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/28@2x.png" alt="" @click="toggle($event)">
                                    </div>
                                    <div class="singleZt">
                                        <div class="singleCover" v-for="(itemSonDes,indexSonDes) in item.parent.sentenceNumber">
                                            <input :id="item.son[0].id+'_'+indexSonDes" type="checkbox" class="radioBox" @change="getAnswer(index,item.son[0].id,indexSonDes,item.parent.answerCount)"
                                                   v-model="AnswerArry[indexBox][index][0].answer" :value="letterArry[indexSonDes]"  @click="getDoNow(item.son[0].content_id)">
                                            <label :for="item.son[0].id+'_'+indexSonDes">
                                                <b style="margin-right: 5px;"></b>
                                                {{letterArry[indexSonDes]}}.<a v-html="itemSonDes"></a></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--填空  除开单选和打勾题 全部算填空  首先是正常的填空-->
                            <div class="" v-if="item.parent.numbering == 2">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="quesArticle tableCover" v-html="item.parent.article"></div>
                            </div>
                            <!--heading 题型  大纲拖拽-->
                            <div class="" v-if="item.parent.numbering == 8">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="artiOption" v-for="(itemSentence,indexSentence) in item.parent.sentenceNumber">
                                    <p class="headSen">{{itemSentence}}</p>
                                </div>
                            </div>
                            <!--匹配 题型  打勾勾-->
                            <div class="" v-if="item.parent.numbering == 4">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="tickTable">
                                    <div class="tickItem">
                                        <p class="tickText"></p>
                                        <div class="chooseText" v-for="(chooseLetter,chooseIndex) in item.parent.article">{{chooseLetter}}</div>
                                    </div>
                                    <div class="tickItem" v-for="(itemSon,indexSon) in item.son">
                                        <p class="tickText">{{itemSon.article}}</p>
                                        <div class="chooseText tickCover" v-for="(itemSonDes,indexSonDes) in item.parent.article">
                                            <input :id="itemSon.id+'_'+indexSonDes" type="radio" class="radioBox" @change="getAnswer(index,itemSon.id,indexSon)"
                                                   v-model="AnswerArry[indexBox][index][indexSon].answer" :value="letterArry[indexSonDes]" @click="getDoNow(itemSon.content_id)">
                                            <label :for="itemSon.id+'_'+indexSonDes"><span></span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--图片 题型-->
                            <div class="" v-if="item.parent.numbering == 5">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="quesCnName">
                                    <img :src="item.parent.image" alt="">
                                </div>
                                <div class="artiOption" v-for="(itemSon,indexSon) in item.son">
                                    <input type="text" :placeholder="itemSon.name" :id="'read_'+ itemSon.content_id" class="imgInput" v-model="AnswerArry[indexBox][index][indexSon].answer" @change="getAnswer(index,itemSon.id,indexSon)" @click="getDoNow(itemSon.content_id)">
                                </div>
                            </div>
                            <!--选项拖拽 题型-->
                            <div class="" v-if="item.parent.numbering == 6">
                                <div class="quesTitle">{{item.parent.title}}</div>
                                <div class="quesCnName" v-html="item.parent.cnName"></div>
                                <div class="quesCnName" v-html="item.parent.article"></div>
                                <div class="artiOption" v-for="(itemSentence,indexSentence) in item.parent.sentenceNumber">
                                    <p class="headSen">{{letterArry[indexSentence]}}. {{itemSentence}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="footNav">
                <div class="footNavCover">
                    <a href="javascript:void(0)" class="reviewBtn" @click="reviewStatus">REVIEW</a>
                    <div class="quesNumCover" id="quesNumCover">
                        <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                        <div class="zoning" v-for="(itemF,indexF) in dataQuestion.question_list">
                            <p>Part {{indexF + 1}}：</p>
                            <a href="javascript:void(0)"
                               :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': item.th == current }"
                               v-for="(item,index) in itemF"
                               @click="welter(item.pid,item.content_id,item.th,item.status,indexF)" :id="'quesNum_'+ item.content_id">
                                {{item.th}}
                            </a>
                        </div>
                    </div>
                    <div class="turnBtn">
                        <a href="javascript:void(0)" class="prevBtn" @click="prev()">
                            <img :src="current>1?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/31@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/34@2x.png'"
                                 alt="">
                        </a>
                        <a href="javascript:void(0)" class="nextBtn" @click="next()">
                            <img :src="current<totoleQues?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/35@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/32@2x.png'"
                                 alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    window.readTest = new Vue({
        el: '#readBox',
        data() {
            return {
                userImage: '',
                userName: '',
                minutes: 60,
                seconds: 0,
                timeLayout: true,
                volume: 75,
                steps: 1,
                showTip: true,
                timeInter: null,
                isStart: false,

                type: '<?php echo $type?>',//阅读单项2  全科里面的阅读 5
                cate: '<?php echo $cate?>',//
                continue: '<?php echo $continue?>',//

                letterArry: [], //序号  26个字母
                dataQuestion: {},//渲染数据
                resultid: '',//渲染数据
                content_id: '',//当前整套题目content_id
                content_btn: '',//当前小题content_id 默认第一题的
                content_btn_status: '',//当前小题目 方形 圆形
                content_pid: '',//当前题目pid 默认第一题的
                totoleQues: 0,//总题目个数
                currentPart: 0,//当前显示的part
                current: 1,//当前正在看的题目序号
                AnswerArry: [],//答题数据
            }
        },
        watch: {},
        created() {
            let that = this;
            this.getData()
            for (let i = 65; i < 91; i++) {
                that.letterArry.push(String.fromCharCode(i));
            }
        },
        mounted() {
            initContextMenu('#stepExercise')
        },
        methods: {

            getData() {
                let that = this;
                $.get('/cn/mock/read-data', {
                    type: that.type,
                    cate: that.cate,
                    continue: that.continue,
                }, function (res) {
                    if (res.code == 1) {
                        that.initData(res.data);
                        res.data.question_list.map((item, index) => {
                            that.totoleQues += item.length;
                        })
                        that.content_pid = res.data.question_list[0][0].pid;
                        that.content_btn = res.data.question_list[0][0].content_id;
                        that.resultid = res.data.resultid;
                        console.log(that.resultid)
                        that.userImage = res.data.user.image;
                        that.userName = res.data.user.userName;
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            initData(data) {
                let that = this;
                that.dataQuestion = data;
                that.dataQuestion.data.map((item, itemIndex) => {
                    let arry = [];
                    that.AnswerArry.push(arry);
                    item.topic.map((train, index) => {
                        let arryson = []
                        that.AnswerArry[itemIndex].push(arryson);
                        //<!--多选题 numbering 1  填空题 numbering 2  判断题 numbering 3   打勾题 numbering 4   图片填空 numbering 5  选项拖拽题 numbering 6  单选 numbering 7  大纲拖拽题 numbering 8-->

                        if (train.parent.numbering == 4) { //打钩题
                            train.parent.article = train.parent.article.replace(/<\/?.+?>/g, "").replace(/ /g, "");
                        }
                        if (train.parent.numbering == 7 || train.parent.numbering == 3 || train.parent.numbering == 4) { //单选题  打勾题  是非判断 都看作单项选择题
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = '';
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        } else if (train.parent.numbering == 1) { //多选选择题 1
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = [];
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        } else if (train.parent.numbering == 2) { //填空题 2
                            train.parent.article = train.parent.article.replace(/#&/g, '#&*');
                            train.parent.article = train.parent.article.split('*');

                            let last = train.parent.article[train.parent.article.length - 1];
                            train.parent.article = train.parent.article.slice(0, train.parent.article.length - 1);

                            for (var i in train.parent.article) {
                                train.parent.article[i] = train.parent.article[i].replace(/#&/g,
                                    "<input type='text' placeholder='" + train.son[i].name + "' class='BlankInput' id='read_" + train.son[i].content_id + "' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[i].content_id +
                                    "' data-sonNum='" + i + "' onclick='window.readTest.getDoNow(" + train.son[i].content_id + ")'  oninput='window.readTest.blackBlur(this)'>")
                            }
                            let str = '';

                            for (var i in train.parent.article) {
                                str += train.parent.article[i];
                            }
                            train.parent.article = str + last;
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = '';
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        } else if (train.parent.numbering == 8) { //除开单选多选打勾题 都按填空处理
                            train.parent.description = train.parent.description.replace(/#&/g, '#&^*');

                            train.parent.description = train.parent.description.split('^*');
                            let last = train.parent.description[train.parent.description.length - 1];
                            train.parent.description = train.parent.description.slice(0, train.parent.description.length - 1);
                            for (var i in train.parent.description) {
                                train.parent.description[i] = train.parent.description[i].replace(/#&/g,
                                    "<input type='text' placeholder='" + train.son[i].name + "' class='headInput' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[i].content_id +
                                    "' data-sonNum='" + i + "' id='read_" + train.son[i].content_id + "' onclick='window.readTest.getDoNow(" + train.son[i].content_id + ")'  oninput='window.readTest.blackBlur(this)'>");
                            }
                            let str = '';
                            for (var i in train.parent.description) {
                                str += train.parent.description[i];
                            }
                            item.article.description = train.parent.description = str + (last != '' && last ? last : '');
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = '';
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        } else if (train.parent.numbering == 5) {//图片填空
                            train.parent.image = 'https://ielts.thinkwithu.com' + train.parent.image;
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = '';
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        } else if (train.parent.numbering == 6) {//选项拖拽
                            train.parent.article = train.parent.article.replace(/#&/g, '#&*');
                            train.parent.article = train.parent.article.split('*');
                            let articleEnd = $.trim(train.parent.article[train.parent.article.length - 1]);
                            train.parent.article = train.parent.article.slice(0, train.parent.article.length - 1);
                            for (var i in train.parent.article) {
                                train.parent.article[i] = train.parent.article[i].replace(/#&/g,
                                    "<input type='text' placeholder='" + train.son[i].name + "' class='headInput' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[i].content_id +
                                    "' data-sonNum='" + i + "' id='read_" + train.son[i].content_id + "' onclick='window.readTest.getDoNow(" + train.son[i].content_id + ")'  oninput='window.readTest.blackBlur(this)'>");
                            }
                            let str = '';
                            for (var i in train.parent.article) {
                                str += train.parent.article[i];
                            }
                            let endCheck = articleEnd.replace(/<\/?.+?>/g, "").replace(/ /g, "");
                            if (endCheck && endCheck != '.') {
                                str += articleEnd;
                            }
                            train.parent.article = str;
                            train.son.map((trainSon, indexSon) => {
                                let obj = {};
                                obj.content_id = trainSon.content_id;
                                obj.answer = '';
                                obj.createTime = '';
                                obj.trueAnswer = trainSon.answer;
                                that.AnswerArry[itemIndex][index].push(obj);
                            });
                        }
                    })
                })
                console.log(that.AnswerArry)
            },
            //review 题目
            reviewStatus() {
                let that = this;
                that.dataQuestion.question_list.map(itemList => {
                    itemList.map(item => {
                        if (item.content_id == that.content_btn) {
                            that.content_btn_status == 0 ? item.status = 1 : item.status = 0;
                        }
                    })
                })
            },
            //展开折叠
            toggle(e) {
                if ($(e.target).hasClass('spinOut')) {
                    $(e.target).removeClass('spinOut');
                } else {
                    $(e.target).addClass('spinOut');
                }
                $(e.target).parents('.ItemIn').find('.singleZt').slideToggle();
            },
            //上一题
            prev() {
                let that = this;
                if (that.current > 1) {
                    that.current = that.current - 1;
                    that.dataQuestion.question_list.map((itemList, indexList) => {
                        itemList.map((item, index) => {
                            if (item.th == that.current) {
                                that.currentPart = indexList;
                                that.content_btn = item.content_id;
                                document.getElementById('read_' + that.content_btn)?document.getElementById('read_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }):''
                                document.getElementById('quesNum_' + that.content_btn)?document.getElementById('quesNum_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }):''
                            }
                        })
                    })
                }
            },
            //下一题
            next() {
                let that = this;
                if (that.current < that.totoleQues) {
                    that.current = parseInt(that.current) + 1;
                    that.dataQuestion.question_list.map((itemList, indexList) => {
                        itemList.map((item, index) => {
                            if (item.th == that.current) {
                                that.currentPart = indexList;
                                that.content_btn = item.content_id;
                                document.getElementById('read_' + that.content_btn)?document.getElementById('read_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }):''
                                document.getElementById('quesNum_' + that.content_btn)?document.getElementById('quesNum_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }):''
                            }
                        })
                    })
                }
            },
            //按钮点击滚动
            welter(pid, content_id, index, status, part) {
                this.currentPart = part;//当前正在看的篇幅
                this.current = index;//当前正在看的题目
                this.content_btn_status = status;//当前正在看的题目的状态  0方形 1 圆形
                this.content_btn = content_id;
                this.content_pid = pid;
                document.getElementById('read_' + content_id)?document.getElementById('read_' + content_id).scrollIntoView({block: "center", behavior: "smooth"}):''
            },
            //当前
            getDoNow(content_id) {
                let that = this;
                that.dataQuestion.question_list.map((itemList, indexList) => {
                    itemList.map((item, index) => {
                        if (item.content_id == content_id) {
                            that.current = item.th;
                            that.content_btn = content_id;
                        }
                    })
                })
            },
            //配对填空题  只算一题情况  模考里面展示按照多个题形式来展示
            blackMatch(obj) {
                let that = this;
                let str = '';
                $('.pairInput').each(function () {
                    if ($(this).val().replace(/\s*/g, "") == '') {
                        str += '*';
                    } else {
                        str += $(this).val();
                    }
                });
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                that.AnswerArry[part][site][0].answer = str;
                that.getAnswer();
            },
            //配对填空题  多题情况
            blackMatchMore(obj) {
                let that = this;
                let str = '';
                if ($(obj).val().replace(/\s*/g, "") == '') {
                    str = '*';
                } else {
                    str = $(obj).val();
                }
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                let siteDetail = $(obj).attr('data-sonNum');
                that.AnswerArry[part][site][siteDetail].answer = str;
                that.getAnswer();
            },
            //图片填空题
            blackBlur(obj) {
                let that = this;
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                let queIndex = $(obj).attr('data-sonNum');
                that.AnswerArry[part][site][queIndex].answer = $(obj).val();
                that.getAnswer();
            },
            //监听双向绑定的数据的变化 判断是否做了 多选判断length 单选填空判断去除空格为空
            getAnswer(site, id, index, answerCount) {
                let that = this;
                this.AnswerArry.map(itemPart => {
                    itemPart.map(item => {
                        item.map(itemSon => {
                            that.dataQuestion.question_list.map((list, index) => {
                                list.map(listItem => {
                                    if (typeof itemSon.answer == 'string') {
                                        if (listItem.content_id == itemSon.content_id && itemSon.answer.replace(/\s*/g, '') != '') {
                                            itemSon.createTime = Date.parse(new Date()).toString().substr(0, 10);
                                            listItem.isDo = 1;
                                        } else if (listItem.content_id == itemSon.content_id && itemSon.answer.replace(/\s*/g, '') == '') {
                                            listItem.isDo = 0;
                                        }
                                    } else {
                                        if (listItem.content_id == itemSon.content_id && itemSon.answer.length != 0) {
                                            itemSon.createTime = Date.parse(new Date()).toString().substr(0, 10);
                                            listItem.isDo = 1;
                                            if (answerCount && (itemSon.answer.length > answerCount)) {
                                                itemSon.answer = itemSon.answer.splice(itemSon.answer.length - answerCount, itemSon.answer.length)
                                            }
                                            itemSon.answer = itemSon.answer.sort()
                                        } else if (listItem.content_id == itemSon.content_id && itemSon.answer.length == 0) {
                                            listItem.isDo = 0;
                                        }
                                    }
                                })

                            })
                        })
                    })
                });
                console.log(that.AnswerArry);
            },
            submitText() {
                let that = this;
                this.AnswerArry.map(itemList => {
                    itemList.map(item => {
                        item.map(itemSon => {
                            if (typeof itemSon.answer != 'string') {
                                const reg = new RegExp(',','g')
                                itemSon.answer =  itemSon.answer.sort().toString().replace(reg,'');
                            }
                        })
                    })
                });
                $.post('/cn/mock/save-answer', {
                    resultid: that.resultid,
                    typeid: 2,
                    content: JSON.stringify(that.AnswerArry),
                }, function (res) {
                    if (res.code == 1) {
                        $('.tipsCover').show()
                        $('.tipsCommon').hide()
                        $('.tipsEnd').show()
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            //提交完成进入下阶段
            nextSection() {
                if (this.type != 5) {//去结果页面
                    window.location.href = '/mock/result.html?type=' + this.type + '&cate=' + this.cate
                } else { //去写作
                    window.location.href = '/mock/write.html?type=' + 5 + '&cate=' + this.cate + '&continue=1'
                }
            },
            startTest() {
                this.steps = 4
                this.isStart = true
                this.seconds = 59
                this.minutes = 59
                this.timeDown()
            },
            timeDown() {
                let that = this
                this.timeInter = setInterval(function () {
                    that.seconds--
                    if (that.seconds == 0 && that.minutes > 0) {
                        that.minutes--
                        that.seconds = 59
                    } else if (that.minutes == 0 && that.seconds == 0) {
                        clearInterval(that.timeInter)
                        alert('TIME OUT！将自动交卷')
                        that.submitText()
                    }
                }, 1000)
            },
            continueStep() {
                this.steps = 3
            },
            finishSec() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                if (this.type != 5) {
                    $('.tipsSection').show()
                } else {
                    $('.tipsTest').show()
                }

            },
            pause() {
                clearInterval(this.timeInter)
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsPause').show()
            },
            help() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsHelp').show()
            },
            hide() {
                $('.tipsCover').hide()
                $('.hiddenCover').show()
            }
        },
    });
</script>
